{__NOLAYOUT__}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>__TITLE__</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/css/simcss.css"/>
    <script src="__PUBLIC__/Static/js/avalon.modern.min.js" type="text/javascript" charset="utf-8"></script>
		<script src='__STYLE__/Site/js/swipe.min.js'></script>
		<script src='__STYLE__/Site/js/js.js'></script> 
    <script type="text/javascript">
      var data = {:json_encode($vars)};
    </script>
    <script type="text/javascript">
      avalon.config({
        path:{
          zepto: "__PUBLIC__/Static/js/zepto.min.js",
        },
        shim: {
          zepto:{
            exports: '$'
          }
        }
      });
      require('zepto,ready!', function($){
        $('#top').html(data.config.name);
      });
    </script>
    <style>
   *{
      margin:0px;
      padding:0px;
      font-size: 12px;
      font-family:'microsoft yahei','宋体','tahoma',​'arial',​'simsun',​'sans-serif' ;
      color: #444444;
    }

    img{border: none;}
    li{list-style: none;}
    .cle{clear:both;}
    a{ color: #333333;text-decoration: none; border: none;}
    a:hover{color:#bb0000;cursor: pointer;}
    body {
      background: #EBEBEB;
    }
    .list-t:after {
	     content: "";
    	 position: absolute;
    	 left: 2px;
    	 top: 0px;
    	 height: 28px;
    	 width: 3px;
    	 background: #E04843;
    }
    .list-t {
	     position: relative;
    	 font-size: 1.2em;
    	 width: 100%;
    	 height: 30px;
    	 line-height: 30px;
    	 background: #353A3C;
    	 color: #fff;
    	 text-indent: 11px;
    }
    .list-t a {
	     float: right;
    	 color: #fff;
    	 margin-right: 5px;
    	 text-indent: 0;
    }
    .list-ty {
	     margin: 0 10px;
    }
    .list-ul li {
	     width: 49%;
    	 float: left;
    	 height: 170px;
    	 background: #fff;
    	 margin-top: 2%;
    }
    .list-ul li:nth-of-type(2n+2) {
	     margin-left: 2%;
    }
    .clear:after {
	     content: "";
    	 display: block;
    	 clear: both;
    }
    .list-ul p {
	     color: #494D4F;
    	 margin: 0 5px;
    	 line-height: 30px;
    	 font-size: 1.2em;
    }
    .list-ul p span {
	     color: #FF1D1D;
    }
    .list-ul-img {
    	 height: 140px;
    	 overflow: hidden;
       margin: 0 5px;
    }
    .list-ul-img img {
	     width: 100%;
    }
.addWrap{ 
  position:relative; 
  width:100%;background:#fff;
  margin:0; 
  padding:0;
  }
.addWrap .swipe{
  overflow: hidden;
  visibility: hidden;
  position:relative;
  }
.addWrap .swipe-wrap{
  overflow:hidden;
  position:relative;
  }
.addWrap .swipe-wrap > div {
  float: left;width: 100%;
  position:relative;
  }
#position{ 
  position:absolute;
  bottom:0;
  right:0; 
  margin:0;
  width:100%;
 }
#position li{
  height:5px;
  display:inline-block;
  background-color:#000;
  }
#position li.cur{background-color:#ff0000;}
.img-responsive { 
  display: block;
  max-width: 100%;
  width:100%;
}

.swipe-wrap div p{
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  z-index:33;
  background:#000;
  width:100%;
  opacity:.4;
  height:20px;
}
#top {
	width: 100%;
	text-align: center;
	margin: 10px 0;
	font-size: 1.2em;
}
::selection {
background-color: #b2d3fa;
text-shadow: none;
}
</style>
</head>
  <body>
    <div class="header">
    <div class="addWrap" id="slide">
      <div class="swipe" id="mySwipe">
        <div class="swipe-wrap" id="swipe-wrap-box">
          <tag:productSlide id="vo" >
             <div>
              <a href=" {$vo.url}">
                <img class="img-responsive" src=" {$vo.img}"/>
              </a>
          </div>
          </tag:productSlide>     
        </div>
      </div>
      <ul id="position">
      </ul>
    </div>
  </div>
    <div class="list-ty">
      <div class="list-t">全部商品</div>
      <ul class="list-ul clear">
      <main class="gh-gl" id="vo">
	      <volist name="goodsLists" id="vo">
	       <li>
	       <a href="{$vo.url}">
	        <div class="list-ul-img"d><img src="{$vo['images'][0]}"></div>
	        <p>{$vo.name}<span>￥{$vo.price}</span></p>
	        </a>
	        </li>
        </volist>
		  </main>
      </ul>
    </div>
    <div id="top"></div>
  </body>

</html>






{:p($vars)}